<template>
	<view class="col" >
		<view v-for="item,index in nowList" :key="index">
			<image :src="item" mode="widthFix" style="width: 100%;">
			</image>
		</view>

		<view class="ad"></view>
		<view class="info col">
			<view class="row info-top" @click="goDetail">
				<image class="avater" :src="detail.coverPicList[0]">
				</image>
				<view class="col-between" style="width: 100%;margin-left: 20rpx;">
					<view class="row-between">
						<view class="col">
							<view class="title">{{nowItem.workTitle}}</view>
							<view class="author">作者：{{nowItem.workTitle}}</view>
						</view>
						<image src="/static/images/fa-star-no.svg" class="forcuse" @click.stop="addCollect()"></image>
					</view>
					<view class="count">{{detail.viewNum}}人气|{{detail.commentNum}}评论|{{detail.collectionNum}}收藏</view>
				</view>
			</view>

			<view class="row-between-center" style="margin-top: 20rpx;margin-left: 40rpx;margin-right: 40rpx ;">
				<view class="col">
					<image src="/static/images/forcus.png" class="forcuse" @click.stop="goZan()"></image>
					<view>点赞</view>
				</view>

				<view class="col" @click="showFee = true">
					<image src="/static/images/fa-dashang.svg" class="forcuse"></image>
					<view>打赏</view>
				</view>

				<view class="col" @click.stop="goReview()">
					<image src="/static/images/fa-review.svg" class="forcuse"></image>
					<view>评论</view>
				</view>

				<view class="col">
					<image src="/static/images/fa-share.svg" class="forcuse"></image>
					<view>分享</view>
				</view>
			</view>

			<view class="row-center reward" style="margin-top: 40rpx;" @click="openReward()">
				阅 读 奖 励
			</view>
			<view style="height: 140rpx;"></view>
			<xl-packet :money="rewardMoney" :show="showRed" @close="closeRed" @change="checkResult">
			</xl-packet>
		</view>

		<u-popup :show="showFee" :round="15">
			<view class="fee col">
				<view class="row-end fee-text">
					拥有金币：120
				</view>
				<view class="row-arround" style="margin-top: 30rpx;">
					<view class=" row-center" :class="clickFeeIndex==0?'fee-bg2':'fee-bg'" @click="changeFee(0)">
						<image src="/static/images/fee1.png" class="fee-img"></image>
					</view>
					<view class="row-center" :class="clickFeeIndex==1?'fee-bg2':'fee-bg'"  @click="changeFee(1)">
						<image src="/static/images/fee2.png" class="fee-img"></image>
					</view>
					<view class="row-center" :class="clickFeeIndex==2?'fee-bg2':'fee-bg'" @click="changeFee(2)">
						<image src="/static/images/fee3.png" class="fee-img"></image>
					</view>
				</view>
				<view class="row-center fee-text" style="margin-top: 30rpx;">
					消耗：{{fee[clickFeeIndex].num}}
				</view>
				<view class="row-w-center" style="margin-top: 30rpx;">
					<view class="fee-cancel" @click="showFee=false">
						取  消
					</view>
					<view class="fee-sure" @click="giveFee()">
						确  定
					</view>
				</view>
				<view style="height: 50rpx;">
					
				</view>
			</view>
		</u-popup>

	</view>


</template>

<script>
	import {
		addCommpent,
		getCommpent,
		getHomeRecmend,
		getItemContent,
		getItemWork,
		addFlow,
		addCollect,
		reward,
		getItemDetail,
		billPay,
		authors
	} from '@/api/change/index.js'
	import xlPacket from '@/components/xl-packet/xl-packet.vue'
	
	export default {
		props: {
			//显示/隐藏
			fromId: {
				type: String,
			},
		},
		components: {
			xlPacket
		},
		data() {
			return {
				showFee: false,
				showRed: false,
				showFloat: false,
				list: [],
				nowItem: {},
				nowList: [],
				evaluateList: [],
				showEvaluate: false,
				sendMsg: '',
				nowIndex: 0,
				commonet: {},
				touchNum: 0,
				detail: {},
				rewardMoney: 0,
				clickFeeIndex:0,
				fee:[
					{
						num:25
					},
					{
						num:50
					},
					{
						num:100
					},
				]
			}
		},
		onLoad() {
			console.log('function222')
			// this.getItemContent1()
		},
		mounted: function() {
			// this.getHomeRecmend1()
			this.getItemContent1()
		},
		onShow() {
			console.log('onShowonShowonShow')
		},
		onReady() {
			console.log('onReady')
		},

		methods: {
			closeRed(){
				this.showRed = false
			},
			getAuthors(){
				
				authors(this.nowItem.id).then(res => {
				})
			},
			giveFee(){
				
				billPay({
					money:this.fee[this.clickFeeIndex].num,
					workItemId:this.nowItem.id
				}).then(res => {
					this.showFee=false
				})
			},
			changeFee(index){
				this.clickFeeIndex = index
				
			},
			openReward() {
				this.giveReward()
			},
			giveReward() {
				reward(this.nowItem.id).then(res => {
					this.rewardMoney = 20
					this.showRed = true
				})
			},
			goReview() {
				uni.navigateTo({
					url: '/pages/home/review?workItemId=' + this.detail.id
				})
			},
			touchstart(event) {
				//记录位置
				this.last = event.changedTouches[0];
			},
			//移动角度判断
			getLineAngle(x1, y1, x2, y2) {
				var x = x1 - x2,
					y = y1 - y2;
				if (!x && !y) {
					return 0;
				}
				var angle = (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
				return 360 - angle;
			},
			//结束
			touchend(event) {
				let x1 = this.last.clientX
				let y1 = this.last.clientY
				let x2 = event.changedTouches[0].clientX
				let y2 = event.changedTouches[0].clientY
				let lineAngle = this.getLineAngle(x1, y1, x2, y2)
				// 根据夹角判断当前移动的方向
				if (lineAngle > 170 && lineAngle < 190 && lineAngle != 180) {
					console.log('右滑');
				} else if ((lineAngle > 0 && lineAngle < 10) || (lineAngle > 350 && lineAngle < 360)) {
					console.log('左滑');
				} else if (lineAngle > 80 && lineAngle < 100 && lineAngle != 90) {
					console.log('下滑');
				} else if (lineAngle > 260 && lineAngle < 280 && lineAngle != 270) {
					console.log('上滑');
				} else {
					//点击事件  单次 双击 多次点击
					this.touchNum++
					if (this.touchNum == 0) {} else {
						if (this.touchNum > 1) {
							clearTimeout(this.touchTime)
							//单击事件
							this.touchTime = setTimeout(() => {
								this.touchNum = 0
								console.log('双击');
							}, 250)
						} else {
							clearTimeout(this.touchTime)
							this.touchTime = setTimeout(() => {
								//双击或则多次点击事件
								this.touchNum = 0
								console.log('单机');
							}, 250)
						}
					}
				}
			},

			getDetail(id) {
				getItemDetail(id).then(res => {
					this.detail = res.data
				})
			},


			changeSwiper(e) {
				console.log('changeSwiper', e)
			},

			addFollow() {
				addFlow({
					workId: this.nowItem.workId
				}).then(res => {
					if (!this.nowItem.isFlow) {
						this.nowItem.isFlow = 1
					} else {
						this.nowItem.isFlow = 0
					}
				})
			},
			addCollect() {
				addCollect({
					itemId: this.nowItem.id
				}).then(res => {
					this.getDetail(this.nowItem.workId)
				})
			},

			showEvaluateM() {
				this.showEvaluate = true
				this.getCommpent()
			},

			operateEvalueate() {
				if (!uni.getStorageSync('uid')) {
					uni.navigateTo({
						url: '/pages/login'
					})
					return
				}

				this.showEvaluate = true
			},

			goTop() {
				this.showFloat = !this.showFloat

			},
			getHomeRecmend1() {
				getHomeRecmend({
					// page: 1,
					// pageSize: 10
				}).then(res => {
					this.nowItem = res.data
					this.nowList = res.data.pics
					this.getDetail(this.nowItem.workId)
					this.getAuthors()
				})
			},

			getItemContent1(id) {
				getItemContent(this.fromId).then(res => {
					this.nowItem = res.data
					this.nowList = res.data.pics
					this.getDetail(this.nowItem.id)
					this.getAuthors()
				})
			},

			showMore() {
				this.showFloat = !this.showFloat
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/home/details?id=' + this.nowItem.workId + '&itemId=' + this.nowItem.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fee {
		padding: 15rpx;
		.fee-bg {
			width: 150rpx;
			height: 150rpx;
			background-color: white;
			border-radius: 50%;
		}
		.fee-bg2 {
			width: 150rpx;
			height: 150rpx;
			background-color: white;
			border-radius: 50%;
			border: 1rpx dashed #dcdcdc;
		}
		.fee-text{
			font-size: 35rpx;
			font-weight: 700;
		}
		.fee-img {
			width: 96rpx;
			height: 96rpx;
		}
		.fee-cancel{
			margin-right: 20rpx;
			padding: 16rpx 40rpx;
			border-radius: 15rpx;
			background-color: #4f4f4f;
			color: white;
			font-size: 30rpx;
			font-weight: bold;
		}
		.fee-sure{
				font-weight: bold;
			margin-left: 20rpx;
			padding: 16rpx 40rpx;
			border-radius: 15rpx;
			background-color: #bd3124;
			color: white;
			font-size: 30rpx;
		}
	}

	.ad {
		border-radius: 20rpx;
		margin: 20rpx;
		background-color: red;
		height: 520rpx;
	}

	.pic {}

	.info {
		border-radius: 20rpx;
		background-color: #f8f8f8;
		padding: 20rpx;

		.avater {
			flex-shrink: 0;
			background-color: red;
			height: 180rpx;
			width: 140rpx;
			border-radius: 20rpx;
		}

		.title {
			font-weight: bolder;
			font-size: 36rpx;
			color: black;
			white-space: nowrap;

		}

		.author {
			font-size: 30rpx;
			color: #9a9a9a;
			white-space: nowrap;

		}

		.forcuse {
			width: 70rpx;
			height: 70rpx;
		}

		.count {
			font-size: 30rpx;
			color: black;
		}

		.info-top {
			background-color: white;
			border-radius: 20rpx;
			padding: 20rpx;
		}

		.reward {
			background-color: #bd3124;
			border-radius: 20rpx;
			color: white;
			height: 100rpx;
			font-size: 34rpx;
		}
	}
</style>